<template>
  <div class="header">
    <h1>Header</h1>
    <p>Count的值是{{count}},电影的列表总长度是{{movieList.length}}</p>
    <p>价格是{{price}}</p>
    <button @click="increment">count累加</button>
    <button @click="incrementN({n:5})">count累加n</button>
    <button @click="incrementWait">过一秒再加1count</button>
    <button @click="incrementNWait({n:3})">过一秒再加Ncount</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
name:'Header',
computed:{
    ...mapState('count',['count','price','movieList'])
},
methods:{
    ...mapMutations('count',['increment','incrementN']),
    ...mapActions('count',['incrementWait','incrementNWait'])
}   
}
</script>

<style scoped>
.header{
    margin: 30px;
    background: yellowgreen;
}
</style>